<template>
    <div class="classify">
         <div class="items">
             <img src="../../../assets/上新.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">上新精选</span>
         </div>
         <div class="items">
             <img src="../../../assets/小米众筹.png" alt="Icon 1" class="w-30 h-16 mb-2">
             <span class="text">小米众筹</span>
         </div>
         <div class="items">
             <img src="../../../assets/秒杀.png" alt="Icon 1" class="w-16 h-16">
             <span class="text">有品秒杀</span>
         </div>
         <div class="items">
             <img src="../../../assets/优选.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">生活优惠</span>
         </div>
         <div class="items">
             <img src="../../../assets/米家.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">小米自营</span>
         </div>
         <div class="items">
             <img src="../../../assets/秒杀.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">智能家电</span>
         </div>
         <div class="items">
             <img src="../../../assets/米家.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">有品会员</span>
         </div>
         <div class="items">
             <img src="../../../assets/优选.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">原产地</span>
         </div>
         <div class="items">
             <img src="../../../assets/小米众筹.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">手机</span>
         </div>
         <div class="items">
             <img src="../../../assets/优选.png" alt="Icon 1" class="w-16 h-16 mb-2">
             <span class="text">茅台酒饮</span>
         </div>
     </div> 
 </template>
 
 <script setup>
 </script>
 
 <style scoped>
 .classify {
     margin: 5rem 0 0 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr); /* 指定为五列，每列占据相等宽度 */
     grid-template-rows: auto auto; /* 明确指定两行 */
 }
 
 .items {
     margin: 0 auto;
     width: 5rem;
     height: 5rem;
     text-align: center; /* 文本居中 */
     position: relative; /* 为绝对定位的子元素设定参照 */
 }
 
 .items img {
     width: 2rem; /* 图片宽度适应容器 */
     height: auto; /* 保持图片长宽比 */
     display: block; /* 解决图片下方可能存在的空白间隙 */
     margin: 0 auto;
     margin-bottom: 1rem; /* 图片与文字的间距 */
 }
 
 .text {
     font-size: 1rem;
 }
     
/* 移动端调整 */
@media (max-width: 768px) {
     .classify {
         grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* 减小列宽以适应更窄的屏幕 */
         grid-template-rows: auto auto; /* 依然尝试保持两行 */
         gap: 0.5rem;
         padding: 0.5rem;
     }
 
     .items img {
         width: 1.5rem; /* 减小图片尺寸适应小屏幕 */
     }
 
     .text {
         font-size: 12px;
     }
 }
 </style>